<template>
<button @click="add">添加项目</button>
<button @click="dec" :disabled="lists.length == 0">删除列表</button>
<transition-group name="list" tag="ul" class="list">
    <li v-for="(item,index) in lists" :key="item" class="listItem">{{ item }}(索引：{{index}})</li>
</transition-group>
</template>
<script setup>
import { ref } from 'vue';

const lists = ref([
    '项目1','项目2','项目3'
]);
let count = 3;//计数器
// 添加项目
function add(){
    count++;
    lists.value.push(`项目${count}`);
}
function dec(){
    count--;
    lists.value.pop()
}
</script>
<style scoped>
.list{
    list-style: none;
    
}
.listItem{
    background-color: aliceblue;
    border: 2px solid #ddd;
    margin-top: 10px;
    margin-left: -39px;
}
.list-enter-from,
.list-leave-to{
    opacity: 0;
    transform: translateX(20px);
}
.list-enter-active,
.list-leave-active{
    transition: all 1s ease;
}



</style>